<template>
  <div class="wrapper">
    <div class="wordwrapper">内容详情</div>
    <div class="borders qwrapper">
      <div class="points" v-if="question.questionPoint">{{'loading' && question.questionPoint}}</div>
      <div class="otherwrapper">{{question.name}}</div>
      <div class="content">{{question.content}}</div>
      <div class="date">{{question.date}}</div>
    </div>
    <div class="wordwrapper">
      <span>{{type1===1?'回答详情':'回复详情'}}</span>
      <div class="btn addreply" @click="toreply">添加回复</div>
    </div>
    <div class="noanswer iconfont icon-kong2" v-if="replys.length ==0">暂无回复</div>
    <div class="borders qwrapper" v-for="(item,index) in replys" :key="index">
      <div class="otherwrapper">
        <span>{{item.memberName}}</span>
        <span v-if="question.questionResult === item.answerNo && type1 === 1" class="getreply">最佳回答</span>
        </div>
      <div class="content">{{item.content}}</div>
      <div class="date">
        <span class="getreply" @click="setReply(item)" v-if="selfQue">采纳回答</span>
<!--        <span class="replyson" @click="checkDialog(item)">查看对话</span>-->
<!--        <span class="replyson" @click="replyComment(item)">回复</span>-->
        <span>{{item.date}}</span>
      </div>
    </div>
    <inputpage v-if="showinput" @closeinput="closeinput" @release="release" :source="source"></inputpage>
  </div>
</template>

<script>
import inputpage from '@/components/inputpage.vue'
import axios from 'axios'
// 1.引入mapState访问vuex的state
// vuex的具体内容在store文件夹的index.js
import { mapState } from 'vuex'
export default {
  name: 'reply',
  data () {
    return {
      showinput: false,
      question: {},
      replys: [],
      type1:'',
      source: '' // 1回复问题,2回复评论
    }
  },
  computed: {
    ...mapState({
      memberNo: 'memberNo',
      current: 'current',
      point: 'point'
    }),
    selfQue () {
      if (this.question.memberNo === this.memberNo && this.question.questionResult === '0'){
        return true
      }
      return false
    }    
  },
  inject: ['reload'],
  props: ['questiontype'],
  methods: {
    toreply () {
      // 鉴权
      // 3.可以直接使用this访问vuex的state
      if (this.memberNo) {
        let type = parseInt(this.$route.query.type)
        if (type === 1) {
          this.source = {
            type: 1,
            name: this.question.name
          }
        }
        if (type === 2) {
          this.source = {
            type: 3,
            name: this.question.name
          }
        }
        this.showinput = true
      } else {
        alert('请先登陆')
      }
    },
    replyComment (comment) {
      if (this.memberNo) {
        this.source = {
          name: comment.memberName,
          no: comment.memberNo,
          type: '3'
        }
        this.showinput = true
      } else {
        alert('请先登陆')
      }
    },
    checkDialog () {
      if (this.memberNo) {
      } else {
        alert('请先登陆')
      }
    },
    // 关闭窗口
    closeinput () {
      this.showinput = false
    },
    // 关闭并刷新
    release () {
      this.closeinput()
      this.reload()
    },
    getQuestion () {
      let qid = this.$route.query.qid
      axios
        .get(this.ports.reply.getQuestionDetail + '?questionNo=' + qid)
        .then(this.getQuestionSucc)
    },
    getQuestionSucc (result) {
      if (result.data.msg) {
        let data = [result.data.msg]
        this.question = this.common.handleDate(data)[0]
        console.log(this.question)
      }
    },
    getReply () {
      let qid = this.$route.query.qid
      if (parseInt(this.$route.query.type) === 1) {
        axios.get(this.ports.reply.getReply + '?questionNo=' + qid)
          .then(this.getReplySucc)
      } else if (parseInt(this.$route.query.type) === 2) {
        axios.get(this.ports.reply.mGetReply + '?messageNo=' + qid)
          .then(this.getReplySucc)
      }
    },
    getReplySucc (result) {
      if (result.data.msg) {
        let data = result.data.msg
        this.replys = this.common.handleDate(data)
        if(this.question.questionResult){
          let ind
          let reply = this.replys
          for(let i= 0; i<reply.length; i++){
            if(reply[i].answerNo === this.question.questionResult) {
              ind = i
              break;
            }
          }
          let ele = reply.splice(ind,1)  // 返回被删除元素，数组形式
          reply.unshift(ele[0])
          this.replys = reply
        }
        console.log(this.replys)
      }
    },
    getComment () {
      let qid = this.$route.query.qid
      axios
        .get(this.ports.reply.getMes + '?messageNo=' + qid)
        .then(this.getCommentSucc)
    },
    getCommentSucc (result) {
      if (result.data.msg) {
        this.question = this.common.handleDate([result.data.msg])[0]
      }
    },
    setReply (item) {
      console.log(this.question.questionPoint, this.point)
      this.$confirm('将采纳该答案为最佳答案, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'success'
      }).then(() => {
        let data = {
          queNo: this.question.questionNo,
          replyNo: item.answerNo,
          replyMemberNo: item.memberNo,
          replyMemberPoint: this.question.questionPoint
        }
        this.http.post(this.ports.reply.setBestReply, data, res => {
          if (res.status === 200) {
            if (data.code === 200) {
              this.$message({
                type: 'success',
                message: '采纳成功!'
              })
            }
            this.reload()
          } else {
            this.$message({
              type: 'info',
              message: '采纳失败，请稍后重试'
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消采纳'
        })      
      })
    }
  },
  components: {
    inputpage
  },
  beforeMount () {
    this.type1 = parseInt(this.$route.query.type)
    if (this.type1 === 1) {
      this.getQuestion()
    } else if (this.type1 === 2) {
      this.getComment()
    }
    this.getReply()
  }
}
</script>
<style lang="scss" scoped>
.wrapper {
  width: 764px;
  height: auto;
  padding: 10px;
  margin: 0 auto;
}
.otherwrapper {
  width: 100%;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  font-weight: 600;
}
.content {
  width: 100%;
  height: auto;
  line-height: 20px;
  font-size: 14px;
}
.date {
  width: 100%;
  height: 25px;
  line-height: 25px;
  text-align: right;
  margin-top: 10px;
}
.qwrapper {
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  margin-top: 20px;
}
.wordwrapper {
  width: 100%;
  font-size: 16px;
  font-weight: 700;
  margin-top: 50px;
  span {
    line-height: 40px;
  }
}
.points {
  position: absolute;
  top: -20px;
  right: -30px;
  transform: rotate(30deg);
  background: #f20d0d;
  width: 120px;
  height: 50px;
  color: #fff;
  text-align: center;
  line-height: 80px;
}
.addreply {
  float: right;
}
.replyson {
  margin-right: 20px;
}
.replyson:hover {
  color: #f20d0d;
}
.getreply {
  margin-right: 20px;
  color:#fff;
  background: #5eb56e;
  padding: 3px 8px;
  border-radius: 5px;
  margin-left: 20px;
}
.getreply:hover{
  font-weight: 700;
}
.noanswer {
  display: block;
  font-size: 40px;
  color: #00eeee;
  margin-top: 100px;
  text-align: center;
}
</style>
